<template>
  <div class="form">
    <!-- 1111{{ formData }} -->
    <el-form :model="newFormData" ref="formRef" :rules="formDataRules">
      <el-row>
        <!-- v-bind="colLayout" -->
        <el-col>
          <template>
            <!-- 放入表单元素 -->
            <slot name="form-item"></slot>
          </template>
        </el-col>
        <template v-for="item in newFormItems">
          <el-col
            :key="item.label"
            :span="item.span || colLayout.span"
            :xs="item.xs || colLayout.xs"
            :sm="item.sm || colLayout.sm"
            :md="item.md || colLayout.md"
            :lg="item.lg || colLayout.lg"
            :xl="item.xl || colLayout.xl"
            v-if="!getIsHide(item)"
          >
            <!-- v-if="!item.isHide" -->
            <!-- {{ item.isHide }} -->
            <el-form-item
              :label-width="item.labelWidth || labelWidth"
              :prop="item.prop"
              :label="item.label"
              :rules="item.rules"
              :style="itemStyle"
            >
              <template
                v-if="
                  item.type === 'input' ||
                  item.type === 'password' ||
                  item.type === 'textarea'
                "
              >
                <el-input
                  :disabled="item.disabled"
                  :type="item.type"
                  v-model="formData[item.field]"
                  :placeholder="item.placeholder"
                  v-bind="item.otherOptions"
                  clearable
                  :show-password="item.type === 'password'"
                />
              </template>
              <template v-else-if="item.type === 'radio'">
                <el-radio-group
                  :disabled="item.disabled"
                  :size="item.size"
                  v-model="formData[item.field]"
                  @change="
                    (value) => {
                      item.change && item.change(value, formItems);
                    }
                  "
                >
                  <template v-if="item.button">
                    <el-radio-button
                      v-for="r in item.radioList"
                      :key="r.value"
                      :disabled="r.disabled"
                      :label="r.value"
                      >{{ r.label }}</el-radio-button
                    >
                  </template>
                  <template v-else>
                    <el-radio
                      :border="item.border"
                      v-for="r in item.radioList"
                      :key="r.value"
                      :disabled="r.disabled"
                      :label="r.value"
                      :size="r.size"
                      >{{ r.label }}</el-radio
                    >
                  </template>
                </el-radio-group>
                <!-- <el-radio v-model="radio" label="1">备选项</el-radio> -->
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select
                  :multiple="item.multiple || false"
                  :disabled="item.disabled"
                  v-model="formData[item.field]"
                  clearable
                  :filterable="
                    item.hasOwnProperty('filterable') ? item.filterable : false
                  "
                  :placeholder="item.placeholder"
                  v-bind="item.otherOptions"
                  style="width: 100%"
                  @change="item.change && item.change($event, formItems)"
                >
                  <!-- 支持动态设置options 的key，value -->
                  <!-- :label="option[item.value]" -->
                  <!-- <template
                    v-for="option in item.options"
                    :key="option[item.key]"
                  >
                    <el-option
                      :label="
                        typeof item.value == 'function'
                          ? item.value(option)
                          : option[item.value]
                      "
                      :value="
                        typeof item.key == 'function'
                          ? item.key(option)
                          : option[item.key]
                      "
                    >
                    </el-option>
                  </template> -->
                  <el-option
                    v-for="option in item.options"
                    :key="option[item.key]"
                    :label="
                      typeof item.value == 'function'
                        ? item.value(option)
                        : option[item.value]
                    "
                    :value="option[item.key]"
                  >
                  </el-option>
                </el-select>
              </template>
              <template v-else-if="item.type === 'datepicker'">
                <el-date-picker
                  :disabled="item.disabled"
                  :type="item.type"
                  v-model="formData[item.field]"
                  clearable
                  style="width: 100%"
                  v-bind="item.otherOptions"
                  :value-format="item.valueFormat"
                ></el-date-picker>
              </template>
              <template v-else-if="item.type === 'datetime'">
                <el-date-picker
                  :disabled="item.disabled"
                  v-if="item.isShowOptions"
                  :type="item.type"
                  v-model="formData[item.field]"
                  clearable
                  :picker-options="item.pickerOptions || pickerOptions"
                  style="width: 100%"
                  :value-format="item.valueFormat"
                  v-bind="item.otherOptions"
                ></el-date-picker>
                <el-date-picker
                  v-else
                  :disabled="item.disabled"
                  :type="item.type"
                  v-model="formData[item.field]"
                  clearable
                  :picker-options="item.pickerOptions || pickerOptions"
                  style="width: 100%"
                  v-bind="item.otherOptions"
                  :value-format="item.valueFormat"
                ></el-date-picker>
              </template>
              <!-- 时间范围 -->
              <template v-else-if="item.type === 'datetimerange'">
                <el-date-picker
                  :disabled="item.disabled"
                  v-if="item.isShowOptions"
                  :type="item.type"
                  v-model="formData[item.field]"
                  clearable
                  style="width: 100%"
                  v-bind="item.otherOptions"
                  :value-format="item.valueFormat"
                  :picker-options="
                    item.pickerOptions || dateTimeRangepickerOptions
                  "
                ></el-date-picker>
                <el-date-picker
                  v-else
                  :disabled="item.disabled"
                  :type="item.type"
                  v-model="formData[item.field]"
                  clearable
                  style="width: 100%"
                  v-bind="item.otherOptions"
                  :value-format="item.valueFormat"
                >
                </el-date-picker>
              </template>
              <template v-else-if="item.type === 'timerange'">
                <!--  v-if="item.isShowOptions" -->

                <!--  placeholder="placeholder"  -->
                <!--  :arrow-control="true" :editable="true" -->

                <el-time-picker
                  :disabled="item.disabled"
                  v-model="formData[item.field]"
                  clearable
                  :editable="true"
                  :arrow-control="true"
                  :start-placeholder="item.startPlaceholder"
                  :end-placeholder="item.endPlaceholder"
                  style="width: 100%"
                  :is-range="item.isRange"
                  v-bind="item.otherOptions"
                  :picker-options="item.pickerOptions || {}"
                  :format="item.format"
                  :value-format="item.valueFormat"
                ></el-time-picker>
                <!-- -->
                <!--    -->
                <!-- format="HH:mm" -->
                <!-- <el-time-picker
                v-else
                :disabled="item.disabled"
                :type="item.type"
                v-model="formData[item.field]"
                clearable
                style="width: 100%"
                v-bind="item.otherOptions"
                :value-format="item.valueFormat"
              >
              </el-time-picker> -->
              </template>
              <template v-else-if="item.type == 'text'">
                <span v-bind="item.styles">
                  {{ item.defaultValue || formData[item.field] }}
                </span>
              </template>
              <template v-else-if="item.type == 'custom'">
                <!-- 自定义内容 插槽名字和prop相同 -->
                <slot :name="item.field || item.prop" :row="newFormData" />
              </template>
              <template v-else-if="item.type == 'inputNumber'">
                <!-- 自定义内容 插槽名字和prop相同 -->
                <el-input-number
                  v-model="formData[item.field]"
                  :precision="
                    item.hasOwnProperty('precision') ? item.precision : 2
                  "
                  v-bind="item.otherOptions"
                  width="200"
                  :step="item.step || 1"
                  :min="item.min"
                  :max="item.max"
                  :placeholder="item.placeholder"
                  :disabled="item.disabled"
                >
                </el-input-number>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Form",
  // model: {
  //   prop: "formData",
  //   event: "change",
  // },
  props: {
    formData: {
      type: Object,
      default: () => ({}),
    },
    formItems: {
      type: Array,
      default: () => [],
    },
    formDataRules: {
      type: Object,
      default: () => ({}),
    },
    itemStyle: {
      type: Object,
      // padding: "10px 30px"
      default: () => ({}),
    },
    labelWidth: {
      type: String,
      default: "88px",
    },
    colLayout: {
      type: Object,
      default: () => ({
        xl: 6, // >1920px 4个
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      }),
    },
    // formRef: {
    //   type: String,
    //   default: "formRef",
    // },
  },
  computed: {
    newFormData() {
      // 表单设置默认值
      this.formItems.forEach((item) => {
        // 设置默认值
        if (
          item.hasOwnProperty("defaultValue") &&
          !this.formData.hasOwnProperty(item.prop)
        ) {
          this.formData[item.prop] = item.defaultValue;
          // this.$set(this.formData, item.prop, item.defaultValue);
        }
      });
      // const newObj =
      return { ...this.formData };
    },
    newFormItems() {
      // 设置默认值
      return this.formItems.map((item) => {
        item.type = item.type || "input";
        item.key = item.key || "key";
        item.value = item.value || "value";
        item.field = item.field || item.prop;
        if (
          item.type == "datetimerange" &&
          Object.hasOwnProperty.call(item, "isShowOptions")
        ) {
          item.isShowOptions = item.isShowOptions;
        } else {
          item.isShowOptions = true;
        }

        return item;
      });
    },
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      // 时间范围的快捷选项
      dateTimeRangepickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    validate(cb) {
      this.$refs.formRef.validate(cb);
    },
    clearable(cb) {
      this.$refs.formRef.clearValidate(cb);
    },
    resetFields() {
      this.$refs.formRef.resetFields();
    },
    validateField(cb) {
      this.$refs.formRef.validateField(cb);
    },
    getIsHide(item) {
      if (item.hasOwnProperty("isHide")) {
        if (typeof item.isHide == "function") {
          return item.isHide(item, this.newFormItems, this.newFormData);
        } else {
          return item.isHide;
        }
      } else {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
